<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易新闻列表</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        a{
            /*去除下划线*/
            text-decoration: none;
        }
        .new-wrapper{
            width: 300px;
            height: 358px;
            margin: 50px auto;
            background-color: white;
            border-top: 1px solid #ddd;
        }

        /*设置news-title*/
        .news-title{
            /*为了边框和文字宽度一致，需要将h2转换为行内元素*/
            display: inline-block;
            height: 30px;
            border-top: 1px solid red;
            /*通过margin-top将h2上移，盖住上边框*/
            margin-top: -1px;
            padding-top: 10px;
        }

        .news-title a{
            color: #172c45;
            /*设置文字的加粗效果*/
        }

        .news-img{
            height: 150px;
        }

        /*设置图片的文字效果*/
        .news-img .image-title{
            margin-top: -30px;
            color: #fff;
            font-weight:bold;
            padding-left: 30px;
        }

        img{
           width: 300px;
            height: 150px;
        }

        .news-list{
            margin-top: 20px;
            padding-left: 14px;
            list-style: square;
        }

        .news-list li{
            margin-bottom: 17px;
        }

        .news-list li a{
            font-size: 12px;
            color: #666;
        }

        /*通过before伪元素来为每个li添加项目符号*/
        .news-list li::before{
            content: '〇';
            color:rgb(218,218,218);
            font-size:12px;
            margin-right: 4px;
        }

        /*设置超链接的鼠标移入的样式*/
        .news-list li a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 创建新闻列表的外侧的容器 -->
    <div class="new-wrapper">
        <!-- 创建一个标题标签 -->
        <h2 class="news-title">
            <a href="#">体育</a>
        </h2>

        <!--创建一个图片的容器-->
        <div class="news-img">
            <a href="#">
                <img src="./picture/f0cabd1e967016b6.png.webp" alt="费德勒">
                <!--创建图片标题-->
                <h3 class="image-title">
                    费德勒首负提米，扶额头不满发挥
                </h3>
            </a>
        </div>
            <!--新闻列表-->
            <ul class="news-list">
                <li>
                    <a href="#">陆航直10武直对抗训练 飞行员目视作战</a>
                </li>
                <li>
                    <a href="#">美国黑鹰直升机首次无人驾驶自主飞行</a>
                </li>
                <li>
                    <a href="#">智利滑翔伞工作人员协助乘客起飞时被带到空中</a>
                </li>
                <li>
                    <a href="#">中国空间站航天员乘组年内将在轨“换班” </a>
                </li>
            </ul>

    </div>


</body>
</html>